.sector-opacity {
  & [data-sector] {
    transition: opacity 0.2s ease-in;
    transition-delay: 0.1s;
  }

  [data-active-sector] & [data-sector] {
    opacity: 0.4;
    transition-delay: 0s;
    transition-timing-function: ease-out;
  }

  [data-active-sector="1"] & [data-sector="1"],
  [data-active-sector="2"] & [data-sector="2"],
  [data-active-sector="3"] & [data-sector="3"],
  [data-active-sector="4"] & [data-sector="4"] {
    opacity: 1;
  }
}

.sector-ring {
  & [data-sector] {
    @apply ring-2 ring-transparent ring-offset-2 ring-offset-transparent transition-shadow duration-200 ease-in;
  }

  [data-active-sector="1"] & [data-sector="1"],
  [data-active-sector="2"] & [data-sector="2"],
  [data-active-sector="3"] & [data-sector="3"],
  [data-active-sector="4"] & [data-sector="4"] {
    @apply ring-2 ring-neu-500 ring-offset-neu-0 duration-200 ease-out dark:ring-neu-400;
  }
}
